<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, ">
    <meta charset="UTF-8">
    <title>移动端点透</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: green;
            margin: 0px auto;
            position: absolute;
            top:0;
            left: 0;
            opacity:0.3;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">这是百度</a>
<div id="box"></div>

<script>
    /**
     * PC端的Click可以用在移动端，但是有300ms的延迟，300ms延迟来自判断双击和长按
     * 移动端点透问题
     * 原因：使用原生touch事件也存在点击穿透的问题 ，
     * 因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，
     *
     *
     * 1.例如我们有一个div，他遮住了一个(button)，对这个div我们绑定了touch系列事件。button则绑定了click，
     * 当我们点击蒙版的时候，触发touch事件，蒙版消失，但是由于click事件是有300ms延迟的，300ms之后浏览器就会
     * 获取到当前坐标的元素，这个时候触发button的click事件。
     * 2.同上，不过mask下面是一个a标签,效果和button是差不多的。
     * 3.另一种跨页面点击穿透问题：这次没有mask了，
     * 直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了
     * 解决：
     * 组织默认事件。（有一些手机不支持）
     * 不用a标签做跳转（手淘）window.location.href=跳转
     * */
    var box=document.querySelector("#box");
        box.addEventListener("touchend",function (e) {
            this.style.display="none";
        })
</script>
</body>
</html>